0%

2019-02-19 解析页面流程(1) 解析HTML，构建DOM树

发表于 更新于 分类于

http 请求完成，浏览器获取到了 html，开始解析并且渲染 HTML

总体流程

浏览器内核拿到内容后，渲染步骤：

1
2
3
4
5
6
1.解析HTML，构建DOM树
2.解析CSS，生成CSS规则树
3.合并DOM树和CSS规则，生成render树
4.布局render树（Layout/reflow），负责各元素尺寸、位置的计算
5.绘制render数据（paint），绘制页面像素信息
6.浏览器会将各层的信息发送给GPU,GPU会将各层合成（composite），显示在屏幕上

image

解析 HTML，构建 DOM 树

这是渲染流程第一步，浏览器将解析 HTML，构建成 DOM 树，

1
流程：Bytes  ->  characters ->  tokens   ->  node  ->  DOM
1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
    <title>Critical Path</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
  </body>
</html>

浏览器处理流程大概是这个样子

1
2
3
4
1.Conversion转换 ->  数据字节流（HTML内容Btyes）基于他的编码生成单个字符
2.Tokenizing分词  ->  由数据字节按浏览器HTML规范标准版生成标签、内容（标记TOKEN），每个TOKEN有他自己的定义和规则集
3.Lexing词法分析 ->  由白标签、内容成Token，此时把它们转换为对象，这些对象分别定义了他们的属性和4规则（header/p/span）
4.DOM构建->  开始构建由不同的html标签的关系来渲染父->子结构的树状结构。

浏览器处理示意图：

iamge

形成 DOM 树：

image

结语

今天的内容比较少，一是最近工作挺多的，二是今天家里换了 200M 的网（免费的~ 开心），突然发现原先的路由器「小米路由器 3」和「小米电力猫」、交换机均不支持 200M 的速率，LAN 和 WAN 端口支持 100M，so 要花点时间挑选一个性价比高的路由器的电力猫。

image